<template>
    <div class="container">
        <div class="content">
            <div class="content-txt">
                <span class="subtitle">欢迎体验</span>
                <span class="title">通用后台管理系统</span>
                <span class="desc">- Vue3.0 + ElementPlus + Node + MongoDB </span>
            </div>
            <div class="content-img">
                <img src="@/assets/images/welcome.png" alt="">
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.container {
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .content {
        display: flex;

        .content-txt {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-right: 100px;

            .subtitle {
                font-size: 25px;
                font-weight: 600;
                color: #1f1f1f;
            }

            .title {
                font-size: 40px;
                color: #409eff;
                letter-spacing: 3px;
                margin-top: 5px;
            }

            .desc {
                font-size: 14px;
                color: #999999;
                text-align: right;
                margin-top: 20px;
            }
        }

        .content-img {
            img {
                width: 500px;
            }
        }
    }
}
</style>